//添加商品
var xhr = new XMLHttpRequest();
var content = document.querySelector(".content");
xhr.addEventListener("readystatechange", function(e) {
	console.log("状态码已生效");
	if(e.target.status == 200 && e.target.readyState == 4) {
		console.log("传输成功");
		var dataObj = JSON.parse(e.target.response);
		console.log(dataObj);
		var template = function(pic, title, price) {
			return `<div class="img">
						<img src=${pic} />
					</div>
					<div class="text">
						<h5>${title}</h5>
						<p>库存: 999+件 利润: ￥54.00/件</p>
						<div class="mingxi">
							<p>售价：</p>
							<p>￥${price}</p>
							<div class="box"><p>...</p></div>
						</div>
					</div>
					<div class="edit">
						<div class="pic_iconfont">
							<i class="iconfont icon-bianji"></i>
							<i class="iconfont icon-xiazai"></i>
							<i class="iconfont icon-lajixiang"></i>
							<i class="iconfont icon-zhiding"></i>
							<i class="iconfont icon-zhuanfa"></i>
						</div>
						<div class="pic_text">
							<span>编辑</span>
							<span>下架</span>
							<span>删除</span>
							<span>推广</span>
							<span>置顶</span>
						</div>
					</div>`
		}
		dataObj.goods_data.forEach(function(el, index) {
			var commodity = document.createElement("div");
			commodity.classList.add("commodity");
			commodity.innerHTML = template(el.pic, el.title, el.price);
			content.appendChild(commodity);
		})
		begain();
	}
})
xhr.open("GET", "https://www.easy-mock.com/mock/5bab79173567340cc7d3dc8c/YouBeiShop/getGoodsData");

xhr.send();
//将点击事件封装成一个函数,在拿到数据之后,再执行这个函数去获取相应的节点.
function begain() {
//	已下架---点击事件
	var content=document.querySelector(".content")
	var Already_down_h5=document.querySelector(".Already_down>h5")
	var Commodity_shelves_text_h5=document.querySelector(".Commodity_shelves_text>h5")
	Already_down_h5.addEventListener("click",function(){
		content.innerHTML="";
		Already_down_h5.className="h5";
		Commodity_shelves_text_h5.className=" ";
//		Already_down_h5.style.borderBottom="2px solid #d62d31";
//		Already_down_h5.style.color="#d62d31";
		
	})
	var footer = document.querySelector("footer");
	//获取批量管理节点
	var AdministrationBtn = document.querySelector(".Administration");
	//获取所有商品盒子节点
	var commoditys = document.querySelectorAll(".commodity");

	//获取单个节点
	var commodity = document.querySelector(".commodity");
	//获取放大镜节点
	var complete = document.querySelector(".search")
	//获取放大镜父节点,用于设置margin-left值
	var searchBox = document.querySelector(".searchBox");
	//判断是否进入商品批量模式
	var bool = true;
	
	//	左上角返回按钮
	var backBtn=document.querySelector(".backBtn");
	console.log(backBtn);
	backBtn.addEventListener("click", function(){
	
		location.href="index.html"
	})
	
	//批量管理点击事件
	AdministrationBtn.addEventListener("click", function() {
		console.log(111)
		var commoditys = document.querySelectorAll(".commodity");
		//	debugger
		if(bool) {
			bool = false;
			//		修改下方导航栏
			footer.innerHTML = "";
			footer.innerHTML = "<div class='click_end_box'><div class='allBox'></div><div class='text'><p>全选</p></div><button class='top'>返回顶部</button><button class='Lower_frame'>下架</button><button class='delete'>删除</button></div>";

			//		添加选择点
			for(let i = 0; i < commoditys.length; i++) {

				var div = document.createElement("div");
				div.classList.add("addbox");
				commoditys[i].insertBefore(div, commoditys[i].children[0])
				console.log(123)
				//			右上角放大镜变成完成
				complete.innerHTML = "完成";
			}

			//----------------商品选中与取消-------------------------------------------
			var addboxs = document.querySelectorAll(".addbox");
			var addbox = document.querySelector(".addbox");
			for(let i = 0; i < addboxs.length; i++) {
				addboxs[i].addEventListener("click", function(e) {
					//				判断addbox里面是否有img节点，没有就加上去
					if(addboxs[i].children.length == 0) {
						//					console.log(e.target.children[0])
						var img = document.createElement("img");
						img.src = "../img/Commodity_management/selete.png";
						img.style.width = "100%";
						img.style.height = "100%";
						addboxs[i].appendChild(img);
						console.log(addboxs[i]);
						console.log(i)
					}
					//			再次点击则取消选中
					else {
						addboxs[i].removeChild(addboxs[i].childNodes[0])
					}
				})
				//			
			}
			//		商品全选
			var allBox = document.querySelector(".allBox");
			var allAddBox = SelectDomAll(".addbox");
			allBox.addEventListener("click", function() {
				if(allBox.childNodes.length == 0) {
					var img_all = createDom("img");
					console.log(1111)
					img_all.src = "../img/Commodity_management/selete.png";
					img_all.style.width = "100%";
					img_all.style.height = "100%";
					allBox.appendChild(img_all);

					//					点击全选的时候,为为所有小圆点添加样式
					for(var j = 0; j < allAddBox.length; j++) {
						//						判断是否已经有单个商品已经选中,如果没有,点击全部选中的时候加上去
						if(allAddBox[j].childNodes.length == 0) {
							var img = createDom("img");
							img.src = "../img/Commodity_management/selete.png";
							img.style.width = "100%";
							img.style.height = "100%";
							allAddBox[j].appendChild(img);
							console.log(j)
							console.log(allAddBox[0])
						}
					}
					//					
				} else {
					allBox.removeChild(allBox.childNodes[0]);
					//					为每一个商品取消选中
					for(var j = 0; j < allAddBox.length; j++) {
						allAddBox[j].removeChild(allAddBox[j].childNodes[0]);
					}
				}
			})
			//			商品删除
			var deleteBtn = SelectDom(".delete");
			//删除商品使用的节点
			var commodity = document.querySelector(".commodity");
			//		上架商品数字
			var num = document.querySelector(".Commodity_shelves_text>h5");

			deleteBtn.addEventListener("click", function() {
				var content = SelectDom(".content");
				var content = SelectDom(".content");
				for(let i = 0; i < content.children.length; i++) {

					var addBoxAll = SelectDomAll(".addbox");
					if(addBoxAll[i].children.length != 0) {

						content.removeChild(content.children[i]);
						i--;
					}
				}
				//			上架商品(n) 等于content下面子节点个数
				num.innerHTML = "上架商品(" + content.children.length + ")";
			})

			//		商品批量管理后,点击完成按钮
			var search = document.querySelector(".search");
			search.addEventListener("click", function() {
				if(search.innerHTML == "完成") {
					footer.innerHTML = "<div class='end_box'><button class='add'>添加商品</button><button class='Administration'>批量管理</button></div>";
					for(var i = 0; i < commoditys.length; i++) {
						commoditys[i].removeChild(commoditys[i].children[0]);
					}
					search.innerHTML = "<i class='iconfont icon-fangdajing'>";
					bool = true;
					console.log(bool);

				}
			})

			//		返回頂部
			var topBtn = SelectDom(".top");
			var timer;
			topBtn.addEventListener("click", function() {
				timer = setInterval(function() {
					var scrollTop = document.documentElement.scrollTop;
					document.documentElement.scrollTop = scrollTop - 100;
					console.log(scrollTop)
					if(scrollTop <= 0) {
						clearInterval(timer);
					}

				}, 50)

			})

		}

	})
	//上架商品编辑
	var edit_p = document.querySelectorAll(".box>p");
	var edit_box = document.querySelectorAll(".edit");
	console.log(edit_box)
	for(let i = 0; i < edit_p.length; i++) {

		edit_p[i].addEventListener("click", function() {
			if(edit_p[i].innerHTML == "...") {
				edit_box[i].style.display = "block";
				edit_p[i].innerHTML = "X";
				console.log(1111)
			} else {
				edit_box[i].style.display = "none";
				edit_p[i].innerHTML = "...";
			}
		})

	}

	function createDom(create) {
		return document.createElement(create);
	}

	function SelectDomAll(seletor) {
		return document.querySelectorAll(seletor);
	}

	function SelectDom(seletor) {
		return document.querySelector(seletor);
	}

}